<template>
  <div>
    <div class="text">文字</div>
    <button @click="defaultTheme">默认</button>
    <button @click="dark">黑色</button>
  </div>
</template>

<script>
import store from "@/store";
import { mapMutations } from "vuex";
export default {
  pass: true,
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.init(); // 调用初始化主题方法
  },
  created() {},
  methods: {
    // 将存在 vuex 中的更改主题方法拿过来
    ...mapMutations(["setThemeStore"]),

    // 主题初始化
    init() {
      store.commit("setTheme/setThemeStore", "default");
    },
    // 更改为默认主题
    defaultTheme() {
      store.commit("setTheme/setThemeStore", "default");
    },
    // 更改为暗黑主题
    dark() {
      store.commit("setTheme/setThemeStore", "dark");
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  width: 100vw;
  height: 100px;
  background-color: @primaryColor;
  color: @primaryTextColor;
}
</style>
